<template>
  <view class="bg">
    <view>
      <u-navbar back-text="聊天信息">
      </u-navbar>
      
        <view class="ava-panel">
          <view v-for="item in members" class="ava">
            <u-avatar :src="item.avatar" mode="square" size="100"></u-avatar>
            <text>{{item.account}}</text>
          </view>
          <u-icon class="plus" name="plus" color="#ccc" size="120" @click="add"></u-icon>
        </view>
        
        <view class="panel">
          <u-cell-group>
            <u-cell-item title="群聊名称" :value="teamInfos[teamId].name" :arrow="true" arrow-direction="right" @click="edit">
            </u-cell-item>
            <u-cell-item title="群公告" :arrow="true" arrow-direction="right" @click="upload">
            </u-cell-item>
            <u-cell-item title="群管理" :arrow="true" arrow-direction="right" @click="upload">
            </u-cell-item>
          </u-cell-group>
        </view>
        
        <view class="btn" @click="del">删除并退出</view>
    </view>
  </view>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        teamId: ''
      }
    },
    computed: {
      ...mapState({
        members(state) {
          const id = this.teamId
          if (state.app.teamMembers[id]) {
            return state.app.teamMembers[id].map((item) => {
              return {
                ...item,
                avatar: state.app.userObject[item.account] ? state.app.userObject[item.account].avatar : ''
              }
            })
          }
          return []
        },
        teamInfos: (state) => {
          return state.app.teamInfos;
        },
        userInfos: (state) => {
          return state.app.userInfos;
        }
      })
    },
    methods: {
      add () {
		  // 跳转到选人界面
		  uni.navigateTo({
		  	url: './startGroup?type=2&teamId=' + this.teamId
		  })
      },
      del () {
      },
      edit () {
		  uni.navigateTo({
		  	url: `teamNameEdit?id=${this.teamId}&name=${this.teamInfos[this.teamId].name}`
		  })
      }
    },
    onLoad: function (option) {
      // 存储teamid
      this.teamId = option.id.replace('team-', '');
    }
  }
</script>

<style>
  .bg {
    background: #eee;
    height: 100vh;
    overflow: auto;
  }
  .ava-panel {
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;
        margin-bottom: 20rpx;
        background: #fff;
  }
  .panel {
        margin-bottom: 20rpx;
  }
  .ava {
    display: flex;
    margin: 20rpx;
    flex-direction: column;
    text-align: center;
    color: #999999;
  }
  .plus {
    margin-left: 10rpx;
  }
  .btn{
    height: 100rpx;
    color: red;
    background: #fff;
    line-height: 100rpx;
    text-align: center;
    font-size: 20sp;
  }
</style>
